<template>
  <div class="transaction-order-paeg">
    <el-card class="box-card" style="width: 100%; border: none;" shadow="never">
      <el-row :gutter="20" class="num-card">
        <el-col :span="8">
          <div class="item">
            <span>累计订单</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计成交音值</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计成交金额</span>
            <p>12312.0012</p>
            <em />
          </div>
        </el-col>
      </el-row>

      <el-form :inline="true" label-position="top" :model="searchForm" class="demo-form-inline">
        <el-form-item label="买家UID" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="会员UID" />
        </el-form-item>

        <el-form-item label="卖家UID" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="卖家UID" />
        </el-form-item>

        <el-form-item label="订单编号" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="订单编号" />
        </el-form-item>

        <el-form-item label="状态" size="small" style="margin-right: 20px">
          <el-select v-model="searchForm.datetime" placeholder="请选择">
            <el-option
              v-for="item in [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }, {
                value: '选项3',
                label: '蚵仔煎'
              }]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="IP地址搜索" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="请输入IP/地区" />
        </el-form-item>

        <el-form-item label="查询时间" size="small" style="margin-right: 20px">
          <el-date-picker
            v-model="searchForm.datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="操作" size="small">
          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 100%; border: none; margin: 20px 0;" shadow="never">
      <el-table
        ref="multipleTable"
        :data="tableData.filter(data => data.name.toLowerCase())"
        style="width: 100%; margin-top: 20px"
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />

        <el-table-column
          label="会员UID"
          prop="date"
        />
        <el-table-column
          label="会员手机"
          prop="name"
        />
        <el-table-column
          label="待划转音值"
          prop="name"
        />
        <el-table-column
          label="音值"
          prop="name"
        />
        <el-table-column
          label="音波"
          prop="name"
        />

        <el-table-column
          label="冻结音波"
          prop="name"
        />

        <el-table-column
          label="今日买入音值"
          prop="name"
        />

        <el-table-column
          label="今日卖出音值"
          prop="name"
        />

        <el-table-column
          label="信用度"
          prop="name"
        />

        <el-table-column
          label="身份证号"
          prop="name"
        />

        <el-table-column
          label="状态"
          prop="name"
        />

        <el-table-column
          label="注册时间"
          prop="name"
        />

        <el-table-column
          label="最后登录时间"
          prop="name"
        />

        <el-table-column
          label="登录IP"
          prop="name"
        />

        <el-table-column
          label="常用地"
          prop="name"
        />

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-popconfirm
              title="确定冻结该用户吗？"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >申诉</el-button>
            </el-popconfirm>
            <el-button
              size="mini"
              style="margin-left: 10px"
              @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="margin-top: 20px"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TransactionOrder',
  data() {
    return {
      searchForm: {
        datetime: ''
      },
      tableData: [{
        id: 1,
        name: '123'
      }
      ],
      addTrendForm: {
        id: ''
      },
      multipleSelection: [],
      addTrendVisible: false
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    // 搜索查询
    searchSubmit() {
      alert('搜索')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './style.scss'
</style>
